<template>
	<!-- 项目资金明细 -->
	<view class="projectDetails">
		<view class="projectDetailsbody">
			<view class="name">项目名称：{{ name }}</view>
			<view class="inputCost">注资金额：{{ investmentAmount }}</view>
			<view class="bill">发票：{{ bill }}</view>
			<view class="cost_front">项目资金(税前):{{ costFront }}</view>
			<view class="cost_behind">项目资金(税后):{{ costBehind }}</view>
			<view class="tax">税:{{ tax }}</view>
			<view class="warehouse_cost">设备价值：{{ warehouseCost }}</view>
			<view class="warehouse_tax">设备总税值：{{ warehouseTax }}</view>
			<view class="profit">盈利：{{ profit }}</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			name: '项目1',
			investmentAmount: '10000.00',
			bill: '专用发票 - 0.13',
			costFront: '2000.00',
			costBehind: '10000.00',
			tax: '3000',
			warehouseCost: '10000.00',
			warehouseTax: '50000.00',
			profit: '20000.00'
		};
	}
};
</script>

<style scoped>
/* 项目资金明细样式 */
.projectDetails {
	width: 650rpx;
	padding: 40rpx;
	background: linear-gradient(135deg, #f9fafc 0%, #f0f3f5 100%);
	border-radius: 24rpx;
	box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.08);
	transform: translateY(0);
	transition: all 0.3s ease;
	display: flex;
	justify-content: center;
	margin: 180rpx 0 0 0;
}

.projectDetails:hover {
	transform: translateY(-6rpx);
	box-shadow: 0 18rpx 42rpx rgba(0, 0, 0, 0.12);
}

.projectDetailsbody {
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 50rpx 60rpx;
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 800rpx;
}

.projectDetailsbody::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 8rpx;
	background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
}

.name,
.inputCost,
.bill,
.cost_front,
.cost_behind,
.tax,
.warehouse_cost,
.warehouse_tax,
.profit {
	display: flex;
	justify-content: left;
	align-items: center;
	padding: 28rpx 0;
	border-bottom: 1rpx solid #f0f3f5;
	transition: all 0.2s ease;
}

.name:hover,
.inputCost:hover,
.bill:hover,
.cost_front:hover,
.cost_behind:hover,
.tax:hover,
.warehouse_cost:hover,
.warehouse_tax:hover,
.profit:hover {
	background-color: #fafbfc;
	transform: translateX(4rpx);
}

/* 最后一个元素去掉底部边框 */
.profit {
	border-bottom: none;
}

.name span,
.inputCost span,
.bill span,
.cost_front span,
.cost_behind span,
.tax span,
.warehouse_cost span,
.warehouse_tax span,
.profit span {
	font-weight: 500;
	color: #333;
}

/* 标签样式 */
.name,
.inputCost,
.bill,
.cost_front,
.cost_behind,
.tax,
.warehouse_cost,
.warehouse_tax {
	color: #606266;
	font-size: 30rpx;
}

.name::before,
.inputCost::before,
.bill::before,
.cost_front::before,
.cost_behind::before,
.tax::before,
.warehouse_cost::before,
.warehouse_tax::before {
	content: '•';
	margin-right: 16rpx;
	color: #409eff;
	font-size: 32rpx;
}

/* 数据值样式 */
.name span,
.inputCost span,
.bill span,
.cost_front span,
.cost_behind span,
.tax span,
.warehouse_cost span,
.warehouse_tax span,
.profit span {
	font-size: 32rpx;
	color: #303133;
	padding: 8rpx 18rpx;
	border-radius: 12rpx;
	transition: all 0.2s ease;
	background-color: rgba(245, 247, 250, 0.7);
	min-width: 200rpx;
	text-align: right;
}

.name span:hover,
.inputCost span:hover,
.bill span:hover,
.cost_front span:hover,
.cost_behind span:hover,
.tax span:hover,
.warehouse_cost span:hover,
.warehouse_tax span:hover,
.profit span:hover {
	background-color: #f5f7fa;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

/* 突出显示关键数据（盈利） */
.profit {
	padding-top: 40rpx;
	color: #e64340;
	font-size: 34rpx;
	font-weight: 500;
	justify-content: center;
}

.profit::before {
	content: '▲';
	margin-right: 16rpx;
	color: #e64340;
	font-size: 36rpx;
}

.profit span {
	font-size: 40rpx;
	font-weight: 600;
	color: #e64340;
	padding: 12rpx 24rpx;
	background-color: rgba(230, 67, 64, 0.08);
	border-radius: 16rpx;
	margin-left: 16rpx;
}

/* 发票特殊样式 */
.bill span {
	color: #909399;
}

.bill span::after {
	content: '税率';
	margin-left: 12rpx;
	font-size: 26rpx;
	color: #c0c4cc;
}

/* 全局样式 */
page {
	background-color: #f8fafc;
	display: flex;
	justify-content: center;
}
</style>
